<template>
<div>
  <p>{{num}}</p>
  <p>{{sum}}</p>
  <p>{{msg}}</p>
  <p>{{msu()}}</p>
</div>
</template>

<script>
export default {
  data(){
    return {
      a:10,
      b:20,
      msgl:"我是你爸爸",
      hy:"欢迎语"
    }
  },
  computed:{
    // 计算机属性自带缓存特性
    // 流程 ：第一次调用计算机属性执行，会把return的值撞到缓存中，一会在访问这个计算机属性，直接从缓存拿结果
    // 更新 ：计算机属性函数里依赖的变量发生了变化，计算机属性会重新执行比缓存
    num(){
      return this.a+this.b
    },
    sum(){
      return 10+2
    },
    msg(){
      return this.msgl.split("").reverse().join("");
    }
  },
  methods:{
    msu(){
      return this.hy.split("").reverse().join('');
    }
  }
}
</script>

<style>

</style>